<template>
  <el-container class="main_con">
    <div class="filter_con ds_block">
      <div class="button_area"><el-button v-has size="medium" type="primary" @click="adduser">新增分销商</el-button></div>
      <div class="filter_area">
        <el-input size="medium" v-model="params.name" class="serach_input mr_15 mt_15" placeholder="用户姓名"></el-input>
        <el-input size="medium" v-model="params.mobile" class="serach_input mr_15 mt_15" placeholder="手机号码"></el-input>
        <date-picker size="medium" @change="gettime" class="mr_15 mt_15"></date-picker>
        <el-button size="medium" @click="search">搜索</el-button>
      </div>
    </div>
    <div class="list_con">
      <el-table @selection-change="SelectHadnle" :data="list" element-loading-text fit highlight-current-row class="main-loading">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="name" label="用户">
          <template slot-scope="scope">
            <div class="user">
              <div class="face"><vimage :src="scope.row.picurl" style="width:50px;height:50px;display:block;border-radius:50%;"></vimage></div>
              <div class="info">
                <div class="name" :title="scope.row.name">{{ scope.row.nickname }}</div>
                <div>ID:{{ scope.row.user_id }}</div>
                <!-- <div class="source"><i class="weixin el-sc-weixin"></i></div> -->
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="grade" label="分销商等级">
           <template slot-scope="scope">
             <span>{{scope.row.grade || '默认'}}</span>
              </template>
        </el-table-column>
        <el-table-column prop="mobile" width="150" label="佣金">
          <template slot-scope="scope">
            <div>
              <div>
                <span>待分成佣金:</span>
                <span>{{ scope.row.sum_figure || '0.00' }}</span>
              </div>
              <div>
                <span>待提现佣金:</span>
                <span>{{ scope.row.agent }}</span>
              </div>
              <div>
                <span>已提现佣金:</span>
                <span>{{ scope.row.agent_withdraw }}</span>
              </div>
              <div>
                <span>累计佣金:</span>
                <span>{{ scope.row.agent_total }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="mobile" width="120" label="下级分销商">
          <template slot-scope="scope">
            <div>
              <div v-if="agent_rank>0">
                <span>一级:</span>
                <span>{{ scope.row.l1 }}</span>
              </div>
              <div v-if="agent_rank>1">
                <span>二级:</span>
                <span>{{ scope.row.l2 }}</span>
              </div>
              <div v-if="agent_rank>2">
                <span>三级:</span>
                <span>{{ scope.row.l3 }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="child_user" width="120" label="下级用户"></el-table-column>
        <el-table-column prop="mobile" width="120" label="联系号码"></el-table-column>
        <el-table-column prop="p_nickname" width="140" label="关联上级用户"></el-table-column>
        <el-table-column prop="apply_date" label="时间">
          <template slot-scope="scope">
            <div>
              <div><span>申请时间</span></div>
              <div>
                <span>{{ scope.row.apply_date }}</span>
              </div>
              <div><span>成为分销商时间</span></div>
              <div>
                <span>{{ scope.row.create_time }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-has type="text" @click="showAgentLevel(scope.row.user_id)">分销团队</el-button>
            <el-button v-has type="text" @click="EditHandle(scope.row.id)">编辑</el-button>
            <el-button v-has type="text" @click="handleClose(scope.row.id)">删除</el-button>
            <el-button v-has type="text" @click="CommissionHandle(scope.row.id)">佣金</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table_footer">
        <el-pagination @current-change="ChangeCurrent" class="pages" background layout="prev, pager, next" :total="total" hide-on-single-page></el-pagination>
      </div>
    </div>
    <el-dialog :title="type == 'add' ? '新增分销商' : '编辑分销商'" :visible.sync="drawer" destroy-on-close width="500px">
      <editagent ref="editagent" @on-close="beClose" :id="id" :type="type"></editagent>
    </el-dialog>
    <el-dialog title="佣金记录" :visible.sync="show_commission" width="800px"><editcommission :agent_id="agent_id"></editcommission></el-dialog>
    <el-dialog title="分销团队" :visible.sync="show_AgentLevel" width="1080px"><agentLevel ref="agentLevel" :agent_user_id="agent_user_id"></agentLevel></el-dialog>
  </el-container>
</template>

<script>
import {getagentlist, delagent} from '@/api/mall/agent';
import Editagent from './components/Editagent';
import Editcommission from './components/Editcommission';
import AgentLevel from './components/AgentLevel';
import DatePicker from '@/components/DatePicker/index';
import {fitter_keyword} from '@/utils/index';
import {mapGetters} from 'vuex';

export default {
  data() {
    return {
      params: {
        name: '',
        mobile: '',
        begin_date: '',
        end_date: ''
      },
      paramsdf: {},
      page: 1,
      size: 10,
      total: 0,
      listLoading: true,
      list: [],
      drawer: false,
      direction: 'rtl',
      id: '',
      type: 'add',
      selectionData: [],
      show_commission: false,
      show_AgentLevel: false,
      agent_id: -1,
      agent_user_id: -1
    };
  },
  components: {
    Editagent,
    DatePicker,
    Editcommission,
    AgentLevel
  },
  mounted() {
    this.getlist();
  },
  computed: {
    ...mapGetters(["agent_rank"])
  },
  methods: {
    CommissionHandle(id) {
      this.agent_id = id;
      this.show_commission = true;
    },
    search() {
      this.paramsdf = fitter_keyword(this.params);
      this.getlist();
    },
    //启用，禁用
    EnableHandle(data) {
      let _this = this;
      let status = Number(data.status != '正常');
      this.$confirm(status ? '确认启用？' : '确认禁用？')
        .then(_ => {
          let params = data;
          params.status = status;
          editadminuser(params).then(res => {
            _this.getlist();
          });
        })
        .catch(_ => {});
    },
    //选择
    SelectHadnle(selection) {
      this.selectionData = selection;
    },
    //删除
    handleClose(id) {
      let _this = this;
      this.$confirm('确认删除？')
        .then(_ => {
          let data = {
            id: id
          };
          delagent(data).then(res => {
            _this.getlist();
          });
        })
        .catch(_ => {});
    },
    //新增
    adduser() {
      this.type = 'add';
      this.drawer = true;
      this.id = -1;
    },
    //编辑
    EditHandle(id) {
      this.id = id;
      this.type = 'edit';
      this.drawer = true;
      this.$nextTick(() => {
        this.$refs.editagent.getlist(id);
      });
    },
    showAgentLevel(id) {
      this.show_AgentLevel = true;
      this.agent_user_id = id;
      this.$nextTick(_ => {
        this.$refs.agentLevel.init();
      });
    },
    //编辑完成
    beClose() {
      (this.drawer = false), this.getlist();
    },
    //获取列表
    getlist() {
      this.listLoading = true;
      var data = this.paramsdf;
      getagentlist(this.page, data).then(res => {
        var jsondata = res.msg;
        this.list = jsondata.data;
        this.total = jsondata.total;
        // this.list = response.data.items
        this.listLoading = false;
      });
    },
    //获取时间
    gettime(value) {
      this.params.begin_date = value[0];
      this.params.end_date = value[1];
    },
    //切换页码
    ChangeCurrent(page) {
      this.page = page;
      this.search();
    }
  }
};
</script>

<style lang="scss" scoped>
.user {
  display: flex;

  .info {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    justify-content: center;
    .name {
      display: -webkit-box; /*作为弹性伸缩盒子模型显示*/
      -webkit-line-clamp: 1; /*显示的行数；如果要设置2行加...则设置为2*/
      overflow: hidden; /*超出的文本隐藏*/
      text-overflow: 'ellipsis'; /* 溢出用省略号*/
      -webkit-box-orient: vertical; /*伸缩盒子的子元素排列：从上到下*/
      margin-bottom: 5px;
    }

    .source {
      .weixin {
        font-size: 18px;
        color: #333333;
      }
    }
  }
}
</style>
